<template>
  <a-card :bordered="false">
    <div class="no-print" style="text-align: right">
      <a-range-picker
        :placeholder="['开始月份', '结束月份']"
        :format="dateFormat"
        :value="value"
        :mode="['month', 'month']"
        :defaultValue="[moment(start, dateFormat), moment(end, dateFormat)]"
        @change="handleChange"
        @panelChange="handlePanelChange"
      />
      <a-button v-print="'#printContent'" style="margin-left: 18px" ghost type="primary">打印</a-button>
    </div>
    <section ref="print" id="printContent" class="transferPrint">
      <div style="text-align: center">
        <p style="font-size: 24px;font-weight: 800">利润汇总表</p>
      </div>
      <!--签字-->
      <a-col :md="24" :sm="24">
        <div class="sign" style="text-align: left;height: inherit;margin-top: 45px">
          <a-col :span="24">
            <a-descriptions :column="6">
              <a-descriptions-item/>
              <a-descriptions-item/>
              <a-descriptions-item/>
              <a-descriptions-item/>
              <a-descriptions-item label="单位">
                元
              </a-descriptions-item>
              <a-descriptions-item label="币种">
                人民币
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :span="24" style="margin-top: 20px">
            <a-table bordered defaultExpandAllRows :expandIcon="expandIcon" :columns="columns" :data-source="data" :pagination="false"  />
          </a-col>
        </div>
      </a-col>
    </section>

  </a-card>
</template>

<script>
  import {getAction} from '@/api/manage'
  import { mergeOf } from '@/utils/mergeCell'
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import JTableComponent from '@/components/jeecg/JTableComponent'

  const columns = [
    {
      title: '门店',
      dataIndex: 'storeName',
      key: 'storeName',
      customRender: (value, row, index) => {
        return {
          children: value,
          attrs: {
            rowSpan:row._num
          },
        };
      },
    },
    {
      title: '分类',
      dataIndex: 'categoryName',
      key: 'categoryName',
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
    }
  ];

  export default {
    name: "FmsReport",
    components: {
      JTableComponent,
    },
    data () {
      return {
        description: '订单设置管理页面',
        model: {},
        value: [],
        start: Date,
        end: Date,
        data: [],
        columns,
        dateFormat: 'YYYY-MM',
        dateFormat1: 'YYYY-MM-DD',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 9 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        confirmLoading: false,
        tableData: [
          {key: '单号', value: '1001'},
          {key: '商品名称', value: '篮球'},
          {key: '价格', value: '120.00'},
          {key: '订单日期', value: '2017-03-01'},
          {key: '付款方式', value: '在线支付'},
          {key: '收货地址', value: '北京市海淀区西北旺镇'},
        ],
		    url: {
          list: "fms/fmsReport/getFmsReport",
        },
       }
    },
    created () {
      this.start = new Date();
      this.end = new Date();
    },
    computed: {

    },
    methods: {
      moment,
      expandIcon(props) {
        return (
          <span style="margin-right:0px">
          </span>
        );
      },
      onChange(date, dateString) {
        this.start = date[0];
        this.end = date[1];
        console.log("onChange start",this.start);
        this.getFmsReport();
      },
      handleChange(value) {
        this.value = value;
      },
      handlePanelChange(value, mode) {
        this.value = value;
        this.start = value[0];
        console.log('start:  ' + this.start);
        this.end = value[1];
        console.log('value:  ' + this.value);
        this.getFmsReport();
      },
      getFmsReport () {
        getAction(this.url.list,{startTime:this.start,endTime:this.end}).then((res) => {
          if (res.success) {
            /*res.result.forEach(record => {
              if (record.categoryType.toLocaleUpperCase() == 'OUT') {
                record.amount = -1 * record.amount;
              }
            })*/
            mergeOf(res.result, (r1, r2)=>r1.storeName==r2.storeName);
            this.data = res.result;
          } else {
            this.$message.warning(res.message)
          }
        })
      },

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>